Кнопка вверх

С помощью этой кнопки можно быстро прокрутить страницу вверх


<style> /*Back to top button */ #back-top{ position:fixed; bottom:30px; right: 60px; /*смещение на середину экрана*/ display: none; /*сначала скроем её*/ } #back-top a{ width:64px; display:block; text-align:center; font:11px/100% Arial, Helvetica, sans-serif; text-transform:uppercase; text-decoration:none; color:#bbb; /*при наведении мышки меняем фон медленно*/ -webkit-transition:1s; -moz-transition:1s; transition:1s; } /*при наведении мышки делаем фон черным*/ #back-top a:hover{ color:#000; } #back-top span{ width:64px; height:64px; display:block; margin-bottom:7px; background:#ddd url(images/up-arrow1.png) no-repeat center center; /* скругляем углы */ -webkit-border-radius:15px; -moz-border-radius:15px; border-radius:15px; /*при наведении мышки меняем фон медленно*/ -webkit-transition:1s; -moz-transition:1s; transition:1s; } #back-top a:hover span{background-color:#777} </style> <script type="text/javascript"> $(document).ready(function(){ // прячем кнопку #back-top $("#back-top").hide(); // появление/затухание кнопки #back-top $(function (){ $(window).scroll(function (){ if ($(this).scrollTop() > 100){ $('#back-top').fadeIn(); } else{ $('#back-top').fadeOut(); } }); // при клике на ссылку плавно поднимаемся вверх $('#back-top a').click(function (){ $('body,html').animate({ scrollTop:0 }, 800); return false; }); }); }); </script> <p id="back-top"> <a href="#top"><span></span>Вверх</a> </p>

Вверх